<template>
  <common-page :title="'管理地址：' + assetIP" :style="{'--theme-color': systemInfo.theme}">
    <div slot="header">
      <el-button @click="goBack">返回</el-button>
    </div>

    <common-list-tabs slot="tabs">
      <common-tabs slot="tabs" v-model="page" @tab-click="tabChange">
        <el-tab-pane
          label="资产信息"
          name="components-information"
        ></el-tab-pane>
        <el-tab-pane label="日志" name="components-journal"></el-tab-pane>
        <el-tab-pane label="告警" name="components-alarm"></el-tab-pane>
      </common-tabs>
    </common-list-tabs>
    <component
      slot="content"
      :is="page"
      :key="page"
      @change="change"
      :params="params"
      :assetSourceEditId="assetSourceEditId"
    ></component>
  </common-page>
</template>

<script>
import ComponentsInformation from "./components/information";
import ComponentsJournal from "./components/journal";
import ComponentsAlarm from "./components/alarm";
import { mapGetters } from 'vuex'
export default {
  name: "assetDetails",
  props: {
    assetSourceEditId: {
      type: String,
      default: null,
    },
    assetIP: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      page: "components-information",
      params: {},
    };
  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
  components: {
    ComponentsInformation,
    ComponentsJournal,
    ComponentsAlarm,
  },
  methods: {
    change(to, params) {
      this.params = params;
      this.page = `components-${to}`;
    },
    tabChange() {
      this.params = this.assetIP;
    },
    goBack() {
      //返回
      this.$emit("close");
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .common-title {
  color: var(--theme-color) !important;
}
::v-deep .common-page-content {
  background: #eeeeee;
  height: 100%;
}
::v-deep .el-tabs__item {
  height: 43px !important;
}
</style>
